<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
	<el-descriptions :column="3" border>
		<el-descriptions-item label="客户姓名" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.customerName}}
		</el-descriptions-item>
		<el-descriptions-item label="身份证号" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.idNumber}}
		</el-descriptions-item>

		<el-descriptions-item label="性别" label-align="left" align="center" label-class-name="my-content" width="180px">
			<el-button v-if="clueDetails.gender == 1" type="primary">男</el-button>
			<el-button v-else type="success">女</el-button>
		</el-descriptions-item>
		
		<el-descriptions-item label="年龄" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.age}}
		</el-descriptions-item>
		<el-descriptions-item label="学历" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.education}}
		</el-descriptions-item>
		<el-descriptions-item label="职业" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.occupation}}
		</el-descriptions-item>
		<el-descriptions-item label="省份" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.province}}
		</el-descriptions-item>
		
		<el-descriptions-item label="城市" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.city}}
		</el-descriptions-item>
		<el-descriptions-item label="联系电话" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.contactNumber}}
		</el-descriptions-item>
		<el-descriptions-item label="邮箱" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.email}}
		</el-descriptions-item>
		<el-descriptions-item label="旅游人数" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.travelersCount}}
		</el-descriptions-item>
		
		<el-descriptions-item label="出行类型" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.travelType}}
		</el-descriptions-item>
		<el-descriptions-item label="意向产品ID" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.intentionalProductId}}
		</el-descriptions-item>
		<el-descriptions-item label="创建时间" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.createdTime}}
		</el-descriptions-item>
		<el-descriptions-item label="线索来源" label-align="left" align="center" label-class-name="my-content" width="180px">
			{{clueDetails.clueSource}}
		</el-descriptions-item>

		<el-descriptions-item label="是否成交" label-align="left" align="center" label-class-name="my-content"
			width="180px">
			<el-button v-if="clueDetails.success == 0" type="danger">未成交</el-button>
			<el-button v-else type="success">已成交</el-button>
		</el-descriptions-item>

		<el-descriptions-item label="线索状态" label-align="left" align="center" label-class-name="my-content"
			width="180px">
			<el-button v-if="clueDetails.clueStatus == 0" type="warning" >未分配</el-button>
			<el-button v-if="clueDetails.clueStatus == 1" type="success" >已分配</el-button>
			<el-button v-if="clueDetails.clueStatus == 2" type="info" >已轮转</el-button>
			<el-button v-if="clueDetails.clueStatus == 3" type="danger" >无意向结束</el-button>
		</el-descriptions-item>

		<el-descriptions-item label="是否删除" label-align="left" align="center" label-class-name="my-content"
			width="180px">
			<el-button v-if="clueDetails.status == 0" type="warning" >未删除</el-button>
			<el-button v-if="clueDetails.status == 1" type="success" >已删除</el-button>
		</el-descriptions-item>
		
		<el-descriptions-item label="备注" label-align="left" align="center" label-class-name="my-content"
			width="180px">
			{{clueDetails.note}}
		</el-descriptions-item>
		
	</el-descriptions>
</template>

<!-- js相关 -->
<script>
	export default {
		name: 'ClueDetail',
		props: ['clueDetails'],
		components: {

		},
		data() {
			return {
				// 存放变量，如下（数组，字符串，数字，对象）

			}
		},
		// 声明方法
		methods: {}
	}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
	:deep(.my-label) {
		background: var(--el-color-success-light-9) !important;
	}

	:deep(.my-content) {
		background: var(--el-color-danger-light-9);
	}
</style>